border - left - width

Internet Explorer

Chrome

Opera

Safari

Firefox

7.0

8.0

9.0

7.0

8.0

9.6

10.0

10.0

3.1

4.0

5.0

3.0

3.6

4.0

Помилка

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

 

Коротка інформація

CSS

CSS1

Значення за умовчанням

medium

Наслідує

Ні

Застосовується

До усіх елементів

Аналог HTML

<img border > | <table border>

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/box.html#border - width - properties

Опис

Встановлює товщину межі зліва від елементу.

Синтаксис

border - left - width: значення | thin | medium | thick | inherit

Значення

Три змінні - thin (2 піксели), medium (4 піксели) і thick (6 пікселів) задають товщину межі ліворуч. Для точнішого значення, товщину можна вказувати в пікселах або інших одиницях. inherit наслідує значення батька.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

    <title>border - left - width</title>

    <style type="text/css">

      DIV.line {

        border-left-color: red; /* Колір лінії ліворуч */

        border-left-style: double; /* Стиль лінії */

        border-left-width: thick; /* Товщина лінії */

        padding-left: 10px; /* Відстань між лінією і текстом */

      }

    </style>

  </head>

  <body>

 

    <div class="line">

    <h3>Зверніть увагу!</h3>

    <p>У наші розрахунки не входить завдання підірвати усе місто, тому

          будьте акуратніше, коли почнете пересипати ядерне паливо

          мішка. Щоб не забруднити кімнату, не забудьте покласти

          на підлогу газету.</p>

    </div>

 

  </body>

</html>

Результат цього прикладу показаний ні мал. 1.

Мал. 1. Використання властивості border - left - width

Об'єктна модель

[window.]document.getElementById("elementID").style.borderLeftWidth

Браузери

Браузер Internet Explorer до шостої версії включно при товщині межі 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для усіх меж завтовшки 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється на dashed.

Internet Explorer до сьомої версії включно не підтримує значення hidden і inherit.

Товщина межі при використанні ключових слів thin, medium і thick в різних браузерах може дещо розрізнятися.